// Slider

@import '../../style/themes/default';
@import '../../style/mixins/index';
@import './param';

@mixin slider {
  position: relative;
  display: flex;
  align-items: center;
  height: 100%;
  &-scroll {
    overflow: hidden;
    flex: 1;
    display: inline-flex;
    @include flex-justify();
    > ul {
      display: inline-flex;
      align-items: center;
      position: relative;
      transition: transform $--x-animation-duration-base;
      > li {
        display: inline-flex;
        align-items: center;
        cursor: pointer;
        user-select: none;
        white-space: nowrap;
        z-index: 2;
        x-link {
          flex: 1;
          @include flex-justify();
          @include size(big, $--x-height-big, 0 $--x-padding-big);
          @include size(large, $--x-height-large, 0 $--x-padding-large);
          @include size(medium, $--x-height-medium, 0 $--x-padding-medium);
          @include size(small, $--x-height-small, 0 $--x-padding-small);
          @include size(mini, $--x-height-mini, 0 $--x-padding-mini);
        }
        &.#{$--x-slider}-highlight {
          position: absolute;
          left: 0;
          top: 0;
          z-index: 1;
          width: 0;
          height: 0;
          border-radius: $--x-border-radius;
          background-color: rgba(0, 0, 0, 0.05);
          border: 0.0625rem solid $--x-border;
          &-animated {
            transition: width $--x-animation-duration-base, left $--x-animation-duration-base, height $--x-animation-duration-base,
              top $--x-animation-duration-base;
          }
        }
      }
    }
  }
  &-activated {
    color: $--x-primary;
  }
  &-arrow-left,
  &-arrow-right {
    height: 1.675rem;
    line-height: 1.675rem;
    > x-icon {
      margin-right: 0;
    }
    .x-link {
      padding: 0.5rem;
    }
  }
  &-show-arrow {
    > .#{$--x-slider}-scroll {
      justify-content: start !important;
    }
  }
  &-row {
    > .#{$--x-slider}-scroll > ul {
      flex-direction: row;
    }
  }
  &-column {
    display: inline-flex;
    flex-direction: column;
    > .#{$--x-slider}-scroll {
      display: inline-block;
      > ul {
        flex-direction: column;
        > li {
          display: flex;
          width: 100%;
        }
      }
    }
    > .#{$--x-slider}-arrow-left,
    > .#{$--x-slider}-arrow-right {
      transform: rotate(90deg);
    }
  }
}
